﻿<!DOCTYPE html>
<html>
<head>
    <title id='Description'>jqxChart Axis settings</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxslider.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            var data = [
                { year: 2004, price: 0.1437 },
                { year: 2005, price: 0.1470 },
                { year: 2006, price: 0.1510 },
                { year: 2007, price: 0.1605 },
                { year: 2008, price: 0.1647 },
                { year: 2009, price: 0.1736 },
                { year: 2010, price: 0.1766 },
                { year: 2011, price: 0.1902 },
                { year: 2012, price: 0.1978 },
                { year: 2013, price: 0.2113 },
                { year: 2014, price: 0.2178 }
                ];

            var settings = {
                title: "Electricity prices in Europe between 2004 and 2014",
                description: "Source: Eurostat",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 5, top: 5, right: 15, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: data,
                xAxis:
                    {
                        padding: { top: 0, bottom: 0 },
                        labels: { angle: 0 },
                        dataField: 'year',
                        displayText: 'Year',
                        valuesOnTicks: false,
                        gridLines: { color: '#CDCDCD'},
                        tickMarks: { color: '#CDCDCD'}
                    },
                colorScheme: 'scheme04',
                valueAxis:
                            {
                                position: 'right',
                                padding: { left: 0, right: 0 },
                                title: { text: '<br><br>Price EUR / kWh'},
                                labels: {
                                    visible: true,
                                    angle: 0,
                                    formatSettings: { decimalPlaces: 4, sufix: ' €' }
                                },
                                tickMarks: {
                                    visible: true,
                                    //dashStyle: '2,2',
                                    color: '#CDCDCD',
                                    size: 5
                                },
                                gridLines: {
                                    visible: true,
                                    color: '#CDCDCD',
                                    //dashStyle: '2,2' 
                               },
                               alternatingBackgroundColor: '#EFEFEF',
                               alternatingBackgroundColor2: '#CECECE',
                               alternatingBackgroundOpacity: 0.2
                            },
                seriesGroups:
                [
                        {
                            type: 'stepline',
                            series: [
                                    { formatSettings: { decimalPlaces: 4 }, dataField: 'price', displayText: 'Price per kWh', showLabels: true, symbolType: 'circle' }
                                ]
                        }
                ]
            };

            $('#chartContainer').jqxChart(settings);
            var chartInstance = $('#chartContainer').jqxChart('getInstance');
            chartInstance.enableAnimations = false;

            // valueAxis left padding change handler
            $('#sliderValueAxisLeftPadding').jqxSlider({ min: 0, max: 50, ticksFrequency: 5, value: 0, step: 1, mode: 'fixed', width: '250px' })
                .on('change', function (event) {
                    settings.valueAxis.padding.left = event.args.value;
                    chartInstance.refresh();
                });

            // valueAxis right padding change handler
            $('#sliderValueAxisRightPadding').jqxSlider({ min: 0, max: 50, ticksFrequency: 5, value: 0, step: 1, mode: 'fixed', width: '250px' })
                .on('change', function (event) {
                    settings.valueAxis.padding.right = event.args.value;
                    chartInstance.refresh();
                });

            // valueAxis labels angle change handler
            $('#sliderValueAxisAngle').jqxSlider({ min: 0, max: 360, ticksFrequency: 30, value: 0, step: 1, mode: 'fixed', width: '250px' })
                .on('change', function (event) {
                    settings.valueAxis.labels.angle = event.args.value;
                    chartInstance.refresh();
                });

            // xAxis top padding change handler
            $('#sliderXAxisTopPadding').jqxSlider({ min: 0, max: 50, ticksFrequency: 5, value: 0, step: 1, mode: 'fixed', width: '250px' })
                .on('change', function (event) {
                    settings.xAxis.padding.top = event.args.value;
                    chartInstance.refresh();
                });

            // xAxis bottom padding change handler
            $('#sliderXAxisBottomPadding').jqxSlider({ min: 0, max: 50, ticksFrequency: 5, value: 0, step: 1, mode: 'fixed', width: '250px' })
                .on('change', function (event) {
                    settings.xAxis.padding.bottom = event.args.value;
                    chartInstance.refresh();
                });

            // xAxis labels angle change handler
            $('#sliderXAxisAngle').jqxSlider({ min: 0, max: 360, ticksFrequency: 30, value: 0, step: 1, mode: 'fixed', width: '250px' })
                .on('change', function (event) {
                    settings.xAxis.labels.angle = event.args.value;
                    chartInstance.refresh();
                });


            // valueAxis left position selection
            $("#btnLeft").jqxRadioButton({ width: 60, height: 25, checked: false, groupName: 'valueAxis'}).
                on('change', function (event) {
                    if (event.args.checked)
                    {
                        settings.valueAxis.position = 'left';
                        chartInstance.refresh();
                    }
                });

            // valueAxis right position selection
            $("#btnRight").jqxRadioButton({ width: 60, height: 25, checked: true, groupName: 'valueAxis'}).
                on('change', function (event) {
                    if (event.args.checked)
                    {
                        settings.valueAxis.position = 'right';
                        chartInstance.refresh();
                    }
                });

            // xAxis top position selection
            $("#btnTop").jqxRadioButton({ width: 60, height: 25, checked: false, groupName: 'xAxis'}).
                on('change', function (event) {
                    if (event.args.checked)
                    {
                        settings.xAxis.position = 'top';
                        chartInstance.refresh();
                    }
                });

            // xAxis bottom position selection
            $("#btnBottom").jqxRadioButton({ width: 60, height: 25, checked: true, groupName: 'xAxis'}).
                on('change', function (event) {
                    if (event.args.checked)
                    {
                        settings.xAxis.position = 'bottom';
                        chartInstance.refresh();
                    }
                });

            $("#btnValueAxisFlip").jqxCheckBox({ width: 120, height: 25, hasThreeStates: false, checked: false});
            $("#btnValueAxisFlip").on('change', function (event) {
                    settings.valueAxis.flip = event.args.checked;
                    chartInstance.refresh();
                });

            $("#btnXAxisFlip").jqxCheckBox({ width: 120, height: 25, hasThreeStates: false, checked: false});
            $("#btnXAxisFlip").on('change', function (event) {
                    settings.xAxis.flip = event.args.checked;
                    chartInstance.refresh();
                });
                
        });
    </script>
</head>
<body style="font-family: Verdana; font-size: 13px;">
    <div id='chartContainer' style="width:850px; height:500px">
    </div>
    
    <table style="padding-left: 30px; padding-top: 10px;">
        <tr style="height:50px;">
            <td style="width:300px"><b>Value axis properties:</b</td>
            <td><b>xAxis properties:</b></td>
        </tr>
        <tr>
            <td>Left padding:<div id="sliderValueAxisLeftPadding"></div></td>
            <td>Top padding:<div id="sliderXAxisTopPadding"></div></td>
        </tr>
        <tr>
            <td>Right padding:<div id="sliderValueAxisRightPadding"></div></td>
            <td>Bottom padding:<div id="sliderXAxisBottomPadding"></div></td>
        </tr>
        <tr>
            <td>Labels angle:<div id="sliderValueAxisAngle"></div></td>
            <td>Labels angle:<div id="sliderXAxisAngle"></div></td>
        </tr>
        <tr>
            <td>Position:
            <table><tr>
            <td><div style='margin-left: 10px;' id="btnLeft">Left</div></td>
            <td><div style='margin-left: 10px;' id="btnRight">Right</div></td>
            </tr></table>
            </td>
            <td>Position:
            <table><tr>
            <td><div style='margin-left: 10px;' id="btnTop">Top</div></td>
            <td><div style='margin-left: 10px;' id="btnBottom">Bottom</div></td>
            </tr></table>
            </td>
        </tr>
        <tr>
            <td>
            <div id="btnValueAxisFlip">Flip valueAxis positions</div>
            </td>
            <td>
            <div id="btnXAxisFlip">Flip xAxis positions</div>
            </td>
        </tr>
    </table>
</body>
</html>
